<template>
    <el-container class="background">
      <el-main style="height: 700px;width:800px;border: 2px solid skyblue;">
        <el-row >
          <div id="historyMsg">
            <el-scrollbar id="scroll">
              <el-row id="msg"  v-for="(item,index) in msgList" :key="index">
                <div style="color:skyblue;font-size: 18px;">{{item.nickname}}:</div>
                <div style="margin-left:6px;width: 750px;">{{item.data}}</div>
              </el-row>
            </el-scrollbar>
          </div>
        </el-row>
      </el-main>

      <el-footer class="foot">
        <el-row id="inputMsg">
          <el-input
            maxlength="36"
            class="inp"
            rows="10" v-model="message" resize="none" 
            type="textarea" 
            @keyup.enter.native="enterkeyDown(message, uid, $event)" 
            autofocus="true">
          </el-input>
          <el-button id="sendBtn" type="primary" @click="handleMsg()" style="width:100px">发送</el-button>
        </el-row>
      </el-footer>
    </el-container>
  </template>


<script setup>
import { ElMessage } from 'element-plus';
import { ref,reactive, nextTick } from 'vue';
import config from '../../config';
//聊天面板消息
const msgList = ref([])

//创建webSocket实例
console.log(config.baseApi);
const wsUrl = config.baseApi.split('//')[1].split(':')[0]
// const ws = new WebSocket('ws://10.22.33.33:8000')
const ws = new WebSocket('ws://' + wsUrl + ':8000')
ws.onopen = function(evt){
    console.log('success!!!')
}
//监听消息
ws.onmessage = function(evt){
    msgList.value.push(JSON.parse(evt.data))
    console.log('getmessage',evt.data)
    console.log('msgList',msgList.value)
}

// 绑定输入框内容
let message = ref('')

//发送消息函数
const sendMsg = () =>{
    let send={
        type:"say",
        data:message.value,
        nickname:'greyson'
    }
    ws.send(JSON.stringify(send))

}

//发送消息
const handleMsg = () =>{
  if(message.value == '' || message.value == null){
    ElMessage.error('不能发送空消息')
  }else{
    sendMsg()
    message.value = ''
  }
}

nextTick(()=>{
  const scroll = document.querySelector('#scroll')
  scroll.scrollTop = scroll.scrollHeight
  console.log('123')
})

</script>

<style lang="less" scoped>
.background{
  display: flex;
  align-content: center;
}
.inp {
  width: 700px;
  margin-left: -20px;
}

#inputMsg :deep(.el-textarea__inner) {
  height: 30px;
}


// .foot{
//   width: 300px;
//   display: flex;
// }



</style>